<template>
    <div class="menu-manage">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "设置"},{"name": "菜单管理", "url": "/menuManage"}]'></tz-breadcrumb>
      <div class="form text-right">
        <el-button type="primary" @click="addMenu">添加</el-button>
        <!-- <el-button type="warning" @click="changeMenu">修改</el-button> -->
        <el-button @click="delMenu" type="danger">删除</el-button>
      </div>
      <div class="menuTree">
        <!-- 树 -->
        <el-tree :data="menuData" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => change(data)">
            修改
          </el-button>
        </span>
      </span>
        </el-tree>
      </div>
      <!-- 增加菜单弹窗 -->
      <el-dialog title="添加/修改菜单" :visible.sync="addMenuSign">
        <el-form :model="form">
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off" placeholder="(必填)"></el-input>
          </el-form-item>
          <el-form-item label="菜单路由" :label-width="formLabelWidth">
            <el-input v-model="form.uri" autocomplete="off" placeholder="(必填)"></el-input>
          </el-form-item>
          <el-form-item label="父级菜单" :label-width="formLabelWidth">
            <el-select v-model="form.parent_id" filterable placeholder="请选择父级菜单(可选)">
              <el-option key="0" label="请选择" value="0"></el-option>
              <el-option v-for="item in menuData" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addMenuSign = false">取 消</el-button>
          <el-button type="primary" @click="addMenuForm">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改菜单弹窗 -->
      <el-dialog title="添加/修改菜单" :visible.sync="changeMenuSign">
        <el-form :model="form">
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="form.title" placeholder="(必填)" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="菜单路由" :label-width="formLabelWidth">
            <el-input v-model="form.uri" autocomplete="off" placeholder="(必填)"></el-input>
          </el-form-item>
          <!-- <el-form-item label="子级菜单" :label-width="formLabelWidth">
            <el-select v-model="form.id" filterable placeholder="需要修改的菜单(必选)">
              <el-option key="0" label="请选择" value="0"></el-option>
              <el-option v-for="item in childData" :key="item.id" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
            </el-form-item> -->
          <el-form-item label="父级菜单" :label-width="formLabelWidth">
            <el-select v-model="form.parent_id" filterable placeholder="该菜单所属父级(可选)">
              <el-option key="0" label="请选择" value="0"></el-option>
              <el-option v-for="item in menuData" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="changeMenuSign = false">取 消</el-button>
          <el-button type="primary" @click="changeMenuForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
import api from './../../api/api';
import http from './../../config/index';
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  mounted () {
    this.getMenuList();
  },
  methods: {
    change (e) {
      var that = this;
      console.log(e);
      if (e.parent_id === 0) {
        that.form.parent_id = 0 + '';
        this.form.id = e.id;
      } else {
        this.form.id = e.id;
        that.form.parent_id = e.parent_id;
      };
      that.form.title = e.title;
      that.form.uri = e.uri;
      this.changeMenuSign = !this.changeMenuSign;
      return false;
    },
    delMenu () {
      // 删除菜单
      let that = this;
      that.$confirm('是否删除所选菜单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.post(api.deleteMenu, {
          token: localStorage.getItem('token'),
          id: this.$refs.tree.getCheckedKeys(),
          Pass: '123456'
        }, (response) => {
          if (response.code === '10001') {
            that.$message({
              message: '删除成功',
              type: 'success'
            });
            this.bus.$emit('openMenu', true);
            that.getMenuList();
          } else {
            this.$message.error(response.msg);
          };
        });
      }).catch(() => {});
    },
    addMenu () {
      this.form.id = 0;
      this.form.parent_id = 0;
      this.form.title = '';
      this.form.uri = '';
      this.addMenuSign = !this.addMenuSign;
    },
    changeMenu () {
      this.changeMenuSign = !this.changeMenuSign;
    },
    getMenuList: function () {
      var that = this;
      http.post(api.menuList, {token: localStorage.getItem('token')}, (res) => {
        that.menuData = res.data;
        that.menuData.forEach((element, index) => {
          if (index !== 0) {
            element.next.forEach((item) => {
              that.childData.push(item);
            });
          };
        });
      }, () => {
        console.log('服务器错误，请稍候再试');
      });
    },
    addMenuForm () {
      let that = this;
      console.log(that.form);
      // 添加菜单
      http.post(api.addMenu, {
        token: localStorage.getItem('token'),
        icon: '111',
        title: that.form.title,
        uri: that.form.uri,
        role_id: 1,
        parent_id: that.form.parent_id
      }, response => {
        if (response.code === '10001') {
          that.$message({
            message: '添加成功',
            type: 'success'
          });
          this.bus.$emit('openMenu', true);
          that.getMenuList();
        } else {
          this.$message.error(response.msg);
        };
        this.addMenuSign = false;
      }, () => {
        this.$message.error('服务器错误，请稍候再试');
        this.addMenuSign = false;
      });
    },
    changeMenuForm () {
      // 修改菜单
      let that = this;
      http.post(api.saveMenu, {
        token: localStorage.getItem('token'),
        icon: '111',
        title: that.form.title,
        uri: that.form.uri,
        role_id: 1,
        parent_id: that.form.parent_id,
        id: that.form.id
      }, response => {
        if (response.code === '10001') {
          that.$message({
            message: '修改成功',
            type: 'success'
          });
          this.bus.$emit('openMenu', true);
          that.getMenuList();
        } else {
          this.$message.error(response.msg);
        };
        this.changeMenuSign = false;
      }, () => {
        this.$message.error('服务器错误，请稍候再试');
        this.addMenuSign = false;
      });
    }
  },
  data () {
    return {
      defaultProps: {
        // 子级
        children: 'next',
        // 需要显示的
        label: 'title'
      },
      menuData: [],
      childData: [],
      addMenuSign: false,
      changeMenuSign: false,
      form: {
        title: '',
        uri: '',
        parent_id: '',
        id: ''
      },
      formLabelWidth: '120px'
    };
  }
};
</script>

<style lang="stylus" scoped>
.form
  margin-top: 15px
  background: #fff
  padding: 10px
.menuTree
  margin-top: 15px
  padding: 10px
  background: #fff
</style>
